<template>
  <!-- 新增/修改 -->
  <el-dialog
    v-model="dialogVisible"
    :title="formData.id === undefined ? '新增租户' : '修改租户'"
    @closed="closedDialog"
    width="30%"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      label-position="right"
      v-loading="formLoading"
    >
      <el-form-item label="租户名称" prop="tenantName">
        <el-input
          v-model="formData.tenantName"
          placeholder="请输入租户名称"
          maxlength="256"
        />
      </el-form-item>
      <el-form-item
        v-if="formData.id !== undefined"
        label="租户编码"
        prop="tenantCode"
      >
        <el-input
          v-model="formData.tenantCode"
          placeholder="请输入租户编码"
          maxlength="128"
        />
      </el-form-item>
      <el-form-item label="租户说明" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="4"
          placeholder="请输入租户说明"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="closedDialog">取消</el-button>
      <el-button
        type="primary"
        @click="handleCreateOrUpdate"
        :loading="loading"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import TenantAPI, { type TenantVO } from "@/api/system/sys/tenant";
import { type FormInstance, type FormRules } from "element-plus";
import { cloneDeep } from "lodash-es";

/**
 * 租户编辑详情页面
 */
defineOptions({
  name: "EditTenantDetailsDialog",
});
const props = defineProps({
  tenantId: {
    type: String,
    required: false,
  },
  closedDialog: {
    type: Function,
    required: true,
  },
});

/** 表单初始化 */
const DEFAULT_FORM_DATA: TenantVO = {
  id: props.tenantId,
  tenantCode: undefined,
  tenantName: undefined,
  description: undefined,
};
/** 表单对象 */
const formData = ref<TenantVO>(cloneDeep(DEFAULT_FORM_DATA));
const formRef = ref<FormInstance | null>(null);
/** 表单校验格式 */
const formRules: FormRules<any> = {
  tenantCode: [
    { required: true, message: "请输入租户编码", trigger: "blur" },
    { min: 1, max: 128, message: "长度在128以内个字符", trigger: "blur" },
  ],
  tenantName: [
    { required: true, message: "请输入租户名称", trigger: "blur" },
    { min: 1, max: 128, message: "长度在256以内个字符", trigger: "blur" },
  ],
  description: [
    { message: "请输入租户描述", trigger: "blur" },
    { max: 500, message: "长度在500以内个字符", trigger: "blur" },
  ],
};

const dialogVisible = ref<boolean>(true);
const loading = ref<boolean>(false);
const formLoading = ref<boolean>(false);

/** 新增或者更新 */
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields);

    loading.value = true;
    if (formData.value.id === undefined) {
      // 新增
      TenantAPI.addSysTenantApi(formData.value)
        .then(() => {
          ElMessage.success("操作成功");
        })
        .finally(() => {
          loading.value = false;
          props.closedDialog(true);
        });
    } else {
      // 更新
      TenantAPI.putSysTenantApi(formData.value.id, formData.value)
        .then(() => {
          ElMessage.success("操作成功");
        })
        .finally(() => {
          loading.value = false;
          props.closedDialog(true);
        });
    }
  });
};

/** 关闭弹窗 */
const closedDialog = () => {
  props.closedDialog(false);
};

/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  if (props.tenantId) {
    formLoading.value = true;
    TenantAPI.getSysTenantApi(props.tenantId)
      .then((res) => {
        const { data } = res;
        formData.value = data;
      })
      .finally(() => {
        formLoading.value = false;
      });
  }
});
</script>

<style lang="scss" scoped></style>
